<template>
    <div id="popup" class="ol-popup">
        <div id="popup-content" >
          <p>阀门类型：{{ properties.grade }}</p>
          <p>一级分区：{{ properties.yjfqbh }}</p>
        </div>
        <div>
          <button @click="attrs.onClick()">关闭</button>
        </div>
    </div>
</template>
<script setup>
import { useAttrs, ref } from 'vue';
const props = defineProps({
    content: Object
})

const attrs = useAttrs()

const properties = ref(props.content.features[0]["properties"])

console.log(properties)

</script>
  
<style scoped>
    .ol-popup {
      position: absolute;
      background-color: white;
      box-shadow: 0 1px 4px rgba(0,0,0,0.2);
      padding: 15px;
      border-radius: 10px;
      border: 1px solid #cccccc;
      bottom: 12px;
      left: -50px;
      min-width: 280px;
    }
    .ol-popup:after, .ol-popup:before {
      top: 100%;
      border: solid transparent;
      content: " ";
      height: 0;
      width: 0;
      position: absolute;
      pointer-events: none;
    }
    .ol-popup:after {
      border-top-color: white;
      border-width: 10px;
      left: 48px;
      margin-left: -10px;
    }
    .ol-popup:before {
      border-top-color: #cccccc;
      border-width: 11px;
      left: 48px;
      margin-left: -11px;
    }
    .ol-popup-closer {
      text-decoration: none;
      position: absolute;
      top: 2px;
      right: 8px;
    }
    .ol-popup-closer:after {
      content: "✖";
    }
</style>
  